<template>
  <div class="editinfo">
    <div class="box">
      <div class="tops">
        <van-nav-bar title="我的资料" @click-left="onClickLeft">
          <template #left>
            <i class="iconfont iconbtn_nav_back"></i>
          </template>
        </van-nav-bar>
      </div>
      <div class="photo">
        <van-cell-group>
          <van-cell title="头像" is-link @click="onPhoto">
            <template #default>
              <img :src="$store.state.userInfo.avatar" alt="" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="contents">
        <van-cell-group>
          <van-cell
            title="昵称"
            :value="$store.state.userInfo.nickname"
            is-link
            @click="mynick('修改昵称')"
          />{{$store.state.userInfo.nickname}}
        </van-cell-group>
        <van-cell-group>
          <van-cell
            title="性别"
            :value="
              ($store.state.userInfo.gender === 0
                ? '未知'
                : $store.state.userInfo.gender) === 1
                ? '男孩子'
                : '女孩子'
            "
            is-link
            @click="show1 = true"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell title="地区" :value="getCity" is-link @click="editCity" />
        </van-cell-group>
        <van-cell-group>
          <van-cell
            title="个人简介"
            :value="$store.state.userInfo.intro"
            is-link
            @click="mynick('修改个人简介')"
          />
        </van-cell-group>
      </div>
      <div class="btns" @click="outLogin">
        <van-button type="danger" plain size="large" :hairline="false">
          退出登录</van-button
        >
      </div>
      <van-popup v-model="show" position="bottom" :style="{ height: '36%' }">
        <van-area
          title="选择城市"
          :area-list="areaList"
          :columns-num="2"
          @confirm="confirm"
          @cancel="show = false"
        />
      </van-popup>
      <!-- 修改性别 -->
      <van-action-sheet v-model="show1" :actions="actions" @select="onSelect" />
    </div>
  </div>
</template>

<script>
// 导入城市数据
import citydata from '../../utils/cityData'
// 导入token方法
import { removeLocal } from '../../utils/local'
// 修改用户信息方法
import { edit } from '../../api/api'
// // 导入bus方法
// import bus from '../../utils/bus'

import { mapState } from 'vuex'
export default {
  data () {
    return {
      show: false,
      show1: false,
      // 城市数据
      areaList: citydata,
      actions: [{ name: '未知' }, { name: '男孩子' }, { name: '女孩子' }],
      userdata: {}
    }
  },
  methods: {
    // 返回上一页
    onClickLeft () {
      this.$router.back()
    },
    // 进入编辑头像
    onPhoto () {
      // bus.$emit('data', this.userdata.avatar)
      this.$router.push('/photo')
    },
    // 点击昵称 || 个人简介 时触发
    mynick (value) {
      console.log(value)
      this.$router.push(`/editdata/${value}`)
    },
    // 点击选择城市
    editCity () {
      this.show = true
    },
    // 点解确定城市
    async confirm (value) {
      // 存储城市ID
      // console.log(value)
      // 修改城市
      const res = await edit({ area: value[1].code })
      console.log(res)
      // 将城市数据跟新到vuex
      this.$store.state.userInfo.area = value[1].code
      this.$toast.success('修改成功')
      this.show = false
    },
    // 点击选项时，回调参数 action: Action, index: number
    async onSelect (Action, index) {
      const res = await edit({ gender: index })
      this.show1 = false
      this.$store.state.userInfo.gender = res.data.gender
    },
    // 点击退出登录
    outLogin () {
      removeLocal('heimamm_mobile_token')
      this.$router.push('/login')
      this.$toast.success('成功退出')
    }
  },
  computed: {
    ...mapState(['userInfo']),
    getCity: function () {
      // console.log(citydata.city_list)
      // console.log(this.userInfo.area)
      return citydata.city_list[this.userInfo.area]
    }
  }
}
</script>

<style lang="less" scoped>
.editinfo {
  /deep/ .iconfont {
    font-size: 35px;
  }
  .box {
    background-color: #f7f4f5;
    height: 800px;
    width: 100%;
    .tops {
      background-color: #fff;
      padding-top: 40px;
    }
    .photo {
      margin: 19px 0 10px 15px;
      width: 92%;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 30px;
        height: 30px;
        margin-top: -3px;
      }
    }
    .contents {
      background-color: #fff;
      margin: 10px 0 10px 15px;
      width: 92%;
      border-radius: 10px;
      overflow: hidden;
    }
    .btns {
      width: 92%;
      background-color: #fff;
      margin: 10px 0 10px 15px;
      border-radius: 10px;
      overflow: hidden;
      /deep/.van-button--danger {
        border: transparent;
      }
    }
  }
}
</style>
